<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机点名</title>
    <script>
        var i = 0;
        //t用来接收setTimeOut()的返回值
        var t;
        var st = ['张凉凉','黄鱼', '夏天尚','缪钦辉','吴春光', '陈志朋','严船船','吴春光','朱翔','郑文','林宗棠','林斌','赵炜','林珊','郑慧芳','林华','张金德','肖明伟','连宇梁','韩宏超','郑芳芳','陈慧琳'];
        var u;
        //点名函数
        function students()
        {
            //顺序点名
            /*  if (i < st.length)
             {
             u = st[i];
             }
             else
             {
             //点到最后一个就回来重新点起
             i = 0;
             u = st[i];
             }
             i = i + 1;
             */
            //随机点名 产生0-数组长度之间的数作为数组下标
            var num = Math.floor(Math.random()*st.length);
            u = st[num];
            //更改文本框显示的value值
            document.getElementById("div1").innerHTML = u ;
            t = setTimeout("students()", 100);
        }
        //停止点名函数
        function stop()
        {
            clearTimeout(t);
        }
    </script>
    <style>
        body{
            background: #f5faff;
        }
        .ks{
            width: 140px;
            line-height: 55px;
            text-align: center;
            font-weight: bold;
            color: #fff;
            text-shadow:2px 2px 2px #333;
            border-radius: 5px;
            margin:0 20px 20px 0;
            position: relative;
            overflow: hidden;
            background-color: limegreen;
            border:1px solid #d2a000;
            box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;
        }
        #nu{
            background-color: red;
        }
        #div1 { font:40px '微软雅黑';text-align: center; background-color: gainsboro;
            width: 60%;
            height: 60%;
            margin-bottom:20px;
        }
    </style>
</head>
<body>
<form>
    <div align="center">
        <input type="button" value="开始点名" onclick="students()" class="ks"/>
        <input type="button" value="停止点名" onclick="stop()" class="ks" id="nu"/>
        <hr color="blue">
        <br>
        <div id="div1" align="center">随机点名区域</div>
    </div>
</body>
</html>